<template>
  <div class="shouquanneirong1">
    <p>
      2.1 甲方特此授予乙方非独家、不可转让的改编权和拍摄权，即乙方有权在本协议约定的范围内，将剧本改编为短视频并进行拍摄制作。
    </p>
    <p>2.2 乙方仅限于以下方式使用剧本：</p>
    <p>
      （1）将剧本改编为时长不超过 <span class="editable" @input="updateTime" :style="owner" contenteditable="true" @keydown="handleKeydown">{{
        props.hetong.time || '________' }}</span>分钟的短视频；
    </p>
    <p>
      （2）在 <span
        class="editable"
        :style="owner"
        contenteditable="true"
        @input="updatePlatform"
        >{{ props.hetong.platform || '________' }}</span
      >（指定平台，如：抖音、快手等）发布改编后的短视频；
    </p>
    <p>
      （3）在中国大陆范围内传播改编后的短视频。
    </p>
  </div>
</template>
<script lang="ts" setup>
import { ref, defineEmits , onMounted, inject ,computed } from 'vue';
import { useRoute } from 'vue-router'
import { useStore } from 'vuex';
const axios = inject('axios') //注入 axios
// 获取路由信息
const route = useRoute();
const emit = defineEmits();
const store = useStore();
// 计算属性从 Vuex 获取授权内容
const authorization = computed(() => store.getters.getAuthorization);

// 更新 Vuex 中的授权时间
const updateTime = (event: InputEvent) => {
  const newTime = (event.target as HTMLElement).innerText;
  console.log("newTime:" + newTime);
  
  store.dispatch('setAuthorization', { time: newTime, platform: authorization.value.platform, age_limit:authorization.value.age_limit,authorization_fee: authorization.value.authorization_fee });
};

// 更新 Vuex 中的授权平台
const updatePlatform = (event: InputEvent) => {
  const newPlatform = (event.target as HTMLElement).innerText;
  console.log("newPlatform:" + newPlatform);
  store.dispatch('setAuthorization', { time: authorization.value.time, platform: newPlatform,age_limit:authorization.value.age_limit,authorization_fee: authorization.value.authorization_fee });
};


// 合同初始化数据
// const localValues = ref({
//   time: '', 
//   platform: '',
// });
// const initValues = () => {
//   localValues.value.time = props.hetong.time || '________';
//   localValues.value.platform = props.hetong.platform || '________';
// };

// 更新值并emit
// const updateValue = (field: string, event: InputEvent) => {
//   localValues.value[field] = (event.target as HTMLElement).innerText; // 获取当前输入的值
//   console.log("获取当前输入的值:" + JSON.stringify(localValues.value, null, 2));
  
//   // 更新 Vuex 中的状态
//   store.dispatch('updateInputValue', localValues.value);

//   // Emit值到父组件（如果需要）
//   emit('update-input', localValues.value);
// };
const handleKeydown = (event) => {
  if (event.key === "Enter") {
    event.preventDefault(); // 防止换行
  }
};
// 定义 props
const props = defineProps({
  work: {
    type: Object,
    required: true
  },
  hetong: {
    type: Object,
    required: true
  },
  user: {
    type: Object,
    required: true
  }
});
console.log("props：" + JSON.stringify(props, null, 2));

//初始化
const init = async () => {
  // 根据 props 初始化数据
  if (!props.hetong.time) {
    props.hetong.time = '________';
  }
  if (!props.hetong.platform) {
    props.hetong.platform = '________';
  }
};


onMounted(async () => {
  await init();
});



</script>
<style scoped>
/* 可编辑区域样式 */
.editable {
  display: inline-block;
    position: relative; /* 需要进行相对定位，以支持伪元素 */
    min-width: 30px; /* 设置最小宽度以防止元素过于狭窄 */
    cursor: text; /* 文本输入光标 */
    text-align: center; /* 水平居中 */
    padding: 0 10px; /* 给左右添加一些填充，以保持左右两边的下划线 */
}

/* 创建下划线效果 */
.editable::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0; /* 右侧扩展至父元素的右边缘 */
    bottom: 0; /* 确保下划线在文本底部 */
    border-bottom: 1px solid black; /* 下划线样式 */
    pointer-events: none; /* 让下划线不影响文本输入 */
}

.editable:focus {
  outline: none; /* 去掉聚焦时的边框 */
}
.editable[contenteditable="true"]:empty:before {
  content: '________'; /* 空内容时显示下划线 */
  display: inline-block; /* 显示为块元素 */
  text-align: center; /* 水平居中 */
  width: 100%; /* 使其占满整个父元素宽度 */
  line-height: 25px; /* 行高与高度一致 */
}
</style>